<template>
  <div class="pl-2 pr-2">
    <Card
      title="规则设置"
      style="margin-bottom: 5px"
      :bodyStyle="{ padding: '5px', overflow: 'auto', minHeight: '80px' }"
    >
      <template #extra>
        <a-button type="primary" @click="handleAdd">增加</a-button>
      </template>
      <div
        class="flex justify-between p-2"
        style="border-bottom: 1px solid rgb(239, 239, 239); background-color: #fafafa"
      >
        <div class="text-center" style="width: 30%">规则名称</div>
        <div class="text-center" style="width: 30%">规则类型</div>
        <div class="text-center" style="width: 30%">审批节点</div>
        <div class="text-center" style="width: 100px">操作</div>
      </div>
      <draggable
        v-model="list"
        :component-data="{
          type: 'transition-group',
        }"
        :animation="180"
        handle=".draggable-item"
      >
        <template #item="{ element, index }">
          <div
            class="flex items-center justify-between mb-1 p-2"
            :style="[{ borderBottom: list.length - 1 != index ? '1px solid #efefef' : '' }]"
          >
            <div class="text-center ellipsis" style="width: 30%" :type="element.title"
              >{{ element.title }}
            </div>
            <div class="text-center" style="width: 30%"
              >{{
                element.ruleType == 'op'
                  ? '关联操作'
                  : element.ruleType == 'check'
                  ? '校验规则'
                  : element.ruleType == 'connector'
                  ? '连接器'
                  : ''
              }}
            </div>
            <div class="text-center" style="width: 30%"
              >{{
                element.nodeType == 'finished'
                  ? '结束节点'
                  : element.nodeType == 'node'
                  ? '审批节点'
                  : ''
              }}
            </div>
            <div class="text-center flex justify-between" style="width: 100px">
              <FormOutlined
                class="cursor-pointer mr-2"
                style="color: blue"
                title="编辑"
                @click="handleEdit(element, index)"
              />
              <DeleteOutlined
                class="cursor-pointer mr-2"
                style="color: red"
                title="删除"
                @click="handleDelete({ index })"
              />
              <CopyOutlined
                class="cursor-pointer mr-2"
                title="复制"
                @click="handleCopy({ index })"
              />
              <drag-outlined class="ml-2 cursor-pointer draggable-item" title="拖动" />
            </div>
          </div>
        </template>
      </draggable>
    </Card>
  </div>
  <RuleViewsModal @register="register" @success="handleSuccess" />
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import draggable from 'vuedraggable';
  import { DeleteOutlined, DragOutlined, CopyOutlined, FormOutlined } from '@ant-design/icons-vue';
  import { useModal } from '/@/components/Modal';
  import RuleViewsModal from './RuleViewsModal.vue';
  import { deepClone } from '/@/views/formDesigner/utils';
  const { createMessage } = useMessage();
  const props = defineProps({
    formCode: {
      type: String as PropType<string>,
      default: '',
    },
    typeCode: {
      type: String as PropType<string>,
      default: '',
    },
    rules: {
      type: Array,
      default: () => [],
    },
  });
  const list: any = ref([]);
  const index = ref(-1);

  const fetch = async () => {
    list.value = props.rules || [];
  };
  watch(
    () => props.rules,
    async () => {
      fetch();
    },
    {
      immediate: true,
    },
  );

  const [register, { openModal }] = useModal();
  const handleSuccess = (e) => {
    if (index.value == -1) {
      list.value.push(e);
    } else {
      list.value.splice(index.value, 1, e);
    }
  };
  //新增
  const handleAdd = () => {
    index.value = -1;
    openModal(true, {
      isUpdate: false,
      typeCode: props.typeCode,
      formCode: props.formCode,
    });
  };
  //编辑
  const handleEdit = (record, ind) => {
    index.value = ind;
    openModal(true, {
      isUpdate: true,
      record,
      typeCode: props.typeCode,
      formCode: props.formCode,
    });
  };
  //删除
  const handleDelete = ({ index }) => {
    list.value.splice(index, 1);
  };
  const handleCopy = ({ index }) => {
    let item = deepClone(list.value[index]);
    item.title = `${item.title}(副本)`;
    list.value.splice(index + 1, 0, item);
    createMessage.success('操作成功');
  };
  defineExpose({
    list,
  });
</script>
<style scoped>
  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
